<?php 
//创建图片管理类型
function register_image_collection_post_type() {
    $args = array(
        'public' => true,
        'label'  => 'Image Collections',
        'supports' => array('title', 'editor','thumbnail'),
        'show_in_rest'  => true,
        'menu_icon' => 'dashicons-format-gallery',
    );
    register_post_type('image_collection', $args);
}
add_action('init', 'register_image_collection_post_type');


function add_image_collection_metabox() {
    add_meta_box(
        'image_collection_metabox',
        'Image Collection',
        'render_image_collection_metabox',
        'image_collection',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_image_collection_metabox');

function render_image_collection_metabox($post) {
    wp_nonce_field('image_collection_metabox', 'image_collection_nonce');
    $images = get_post_meta($post->ID, 'image_collection', true);
    ?>
    <div id="image-collection-container" class="sortable-container">
        <?php
        if ($images) {
            foreach ($images as $index => $image_id) {
                $image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
                ?>
                <div class="image-item sortable-item" data-id="<?php echo esc_attr($image_id); ?>" data-order="<?php echo esc_attr($index); ?>">
                    <div class="sortable-handle">☰</div>
                    <img src="<?php echo esc_url($image_url); ?>" alt="">
                    <div class="image-actions">
                        <button type="button" class="button replace-image">Replace</button>
                        <button type="button" class="button delete-image">Delete</button>
                    </div>
                </div>
                <?php
            }
        }
        ?>
    </div>
    <button type="button" id="upload-image-button" class="button">Add Images</button>
    <input type="hidden" id="image-collection-ids" name="image_collection" value="<?php echo esc_attr(implode(',', $images ? $images : array())); ?>">
    <?php
}

add_action( 'admin_enqueue_scripts', 'wtk_add_admin_js' );

function wtk_add_admin_js($hook)
{
	// code...
	wp_enqueue_media(  );
    wp_enqueue_script('jquery-ui-sortable');
	wp_enqueue_script('admin-js', get_template_directory_uri() . '/framework/admin/admin.js', array('jquery','jquery-ui-sortable'), '1.0.0', false);

	wp_enqueue_style( 'admin-css', get_template_directory_uri() . '/framework/admin/admin.css' );
}


function save_image_collection_meta($post_id) {
    if (!isset($_POST['image_collection_nonce']) || !wp_verify_nonce($_POST['image_collection_nonce'], 'image_collection_metabox')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (isset($_POST['image_collection'])) {
        $image_ids = explode(',', $_POST['image_collection']);
        //array_filter 如果没有callback的话通常 会移除错误或者空数组，转化成正常数组，而explode不会， 所以需要转换两次 it removes any elements that are considered "falsey," such as null, 0, false, "" (empty strings), etc.
        $image_ids = array_filter($image_ids);

        update_post_meta($post_id, 'image_collection', $image_ids);
    } else {
        delete_post_meta($post_id, 'image_collection');
    }
}
add_action('save_post_image_collection', 'save_image_collection_meta');

function get_image_collection($post_id = null) {
    if (!$post_id) {
        $post_id = get_the_ID();
    }

    $image_ids = get_post_meta($post_id, 'image_collection', true);

    if (!$image_ids || !is_array($image_ids)) {
        return array();
    }

    $images = array();
    foreach ($image_ids as $image_id) {
        $image = array(
            'id' => $image_id,
            'url' => wp_get_attachment_url($image_id),
            'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
            'caption' => wp_get_attachment_caption($image_id),
        );
        $images[] = $image;
    }

    return $images;
}